<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>组件</title>
		<link rel="stylesheet" type="text/css" href="../../static/css/aui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/aui.popover.css"/>
		<script type="text/javascript" src="../../static/js/aui.min.js"></script>		
		<script type="text/javascript" src="../../static/js/aui.popover.js"></script>
		<style type="text/css">
			.aui-content{padding: 0 0 65px 0;}
			.content-top{width: 100%; padding: 20px; box-sizing: border-box;}
			.content-top h2{width: 100%; line-height: 40px; font-size: 18px; color: #333;}
			.content-top p{width: 100%; line-height: 20px; font-size: 13px; color: #888;}
		</style>
	</head>
	<body>
		<div class="container">
			<header class="aui-header">				
				<div class="aui-header-title" style="left: 15px;">组件</div>
			</header>
			<div class="aui-content">
				<div class="content-top">
					<h2>Basic</h2>
					<p>基础组件、常用组件</p>
				</div>
				<div class="aui-grids">
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('color/index.html')">
						<div class="aui-grid-icon"><i class="iconfont iconcolor" style="color: #EE0000;"></i></div>
						<div class="aui-grid-text">Color色彩</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('button/index.html')">
						<div class="aui-grid-icon"><i class="iconfont iconanniu" style="color: #eb077a;"></i></div>
						<div class="aui-grid-text">Button按钮</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('tag/index.html')">
						<div class="aui-grid-icon"><i class="iconfont icontag" style="font-size: 25px; color: #fe2f24;"></i></div>
						<div class="aui-grid-text">Tag标签</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('badge/index.html')">
						<div class="aui-grid-icon"><i class="iconfont iconbadge" style="font-size: 28px; color: #fec002;"></i></div>
						<div class="aui-grid-text">Badge数字角标</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('list/index.html')">
						<div class="aui-grid-icon"><i class="iconfont iconlist" style="font-size: 28px; color: #add51d;"></i></div>
						<div class="aui-grid-text">List列表</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('grid/index.html')">
						<div class="aui-grid-icon"><i class="iconfont icongrid" style="font-size: 22px; color: #fe6503;"></i></div>
						<div class="aui-grid-text">Grid九宫格</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('card/index.html')">
						<div class="aui-grid-icon"><i class="iconfont iconheadlines" style="color: #03A9F4;"></i></div>
						<div class="aui-grid-text">Card卡片</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont iconindexlist" style="color: #05c091;"></i></div>
						<div class="aui-grid-text">Index索引列表</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont iconnavbar" style="color: #fe2f24;"></i></div>
						<div class="aui-grid-text">Navbar导航</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont iconnumberbox" style="font-size: 25px; color: #db639b;"></i></div>
						<div class="aui-grid-text">Number输入框</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('noticebar/index.html')">
						<div class="aui-grid-icon"><i class="iconfont iconnotice" style="font-size: 25px; color: #05c091;"></i></div>
						<div class="aui-grid-text">Noticebar通告</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont iconsearch" style="font-size: 22px; color: #197DE0;"></i></div>
						<div class="aui-grid-text">Searchbar搜索</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont iconxing" style="font-size: 22px; color: #fec002;"></i></div>
						<div class="aui-grid-text">Fav收藏按钮</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont iconclock" style="color: #EE0000;"></i></div>
						<div class="aui-grid-text">Countdown倒计时</div>
					</div>					
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont iconzhedie" style="color: #05c091;"></i></div>
						<div class="aui-grid-text">Collapse折叠面板</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont icon17" style="font-size: 25px; color: #03A9F4;"></i></div>
						<div class="aui-grid-text">Progress进度条</div>
					</div>
					<div class="aui-grid aui-col-xs-3" onclick="aui.openWin('steps/index.html')">
						<div class="aui-grid-icon"><i class="iconfont iconprogress1" style="color: #fe6503;"></i></div>
						<div class="aui-grid-text">Steps步骤条</div>
					</div>
					<div class="aui-grid aui-col-xs-3" style="display: none;">
						<div class="aui-grid-icon"><i class="iconfont icongoods" style="font-size: 25px; color: #fe2f24;"></i></div>
						<div class="aui-grid-text">Goods商品导航</div>
					</div>
				</div>
			</div>
			<footer class="aui-footer row-before">
				<div class="aui-footer-list" onclick="aui.openWin('../../index.html')"><i class="iconfont iconapi"></i><p>接口</p></div>
				<div class="aui-footer-list active" onclick="aui.openWin('index.html')"><i class="iconfont iconui"></i><p>组件</p></div>
				<div class="aui-footer-list" onclick="aui.openWin('../template/index.html')"><i class="iconfont icontamplate"></i><p>模板</p></div>
				<a class="aui-footer-list" target="_blank" href="https://www.kancloud.cn/chen-wanchun/aui-js"><i class="iconfont icondoc"></i><p>文档</p></a>
			</footer>
		</div>
	</body>
	<script type="text/javascript">
		window.addEventListener("load", function(){			
			var lists = document.querySelectorAll(".aui-grid");
			for(var i = 0; i < lists.length; i++){
				aui.touchDom(lists[i], "#EFEFEF");
			}				
		});
	</script>
</html>
